<template>
  <div>
    <!-- 添加按钮 -->
    <el-button type="primary" @click="handleAdd" style="margin-bottom: 20px;">添加管理员</el-button>
    <el-input v-model="searchKeyword" placeholder="请输入要查询的账号..." style="width: 200px; margin-bottom: 20px;"></el-input>
    <el-button type="primary" @click="handleSearch">查询</el-button>
   
    <el-table :data="tableData" border style="width: 100%">
      
      <el-table-column prop="adminAccount" label="管理员账号" width="180"></el-table-column>
      
      <el-table-column prop="adminName" label="管理员名称" width="180"></el-table-column>
      <el-table-column prop="adminIdcard" label="身份证" width="180"></el-table-column>
      <el-table-column prop="adminPhone" label="电话号码" width="180"></el-table-column>
      
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="primary" @click="handleEdit(scope.row)">修改</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加管理员对话框 -->
    <el-dialog :visible.sync="addDialogVisible" title="添加管理员">
      <el-form :model="addForm" label-width="120px">
        <el-form-item label="管理员账号">
          <el-input v-model="addForm.adminAccount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="管理员密码">
          <el-input v-model="addForm.adminPassword" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="管理员名称">
          <el-input v-model="addForm.adminName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="addForm.adminIdcard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="addForm.adminPhone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetAddForm">取 消</el-button>
        <el-button type="primary" @click="addAdmin">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑管理员对话框 -->
    <el-dialog :visible.sync="editDialogVisible" title="编辑管理员">
      <el-form :model="editingAdmin" label-width="120px">
        <el-form-item label="管理员账号">
          <el-input v-model="editingAdmin.adminAccount" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="管理员密码">
          <el-input v-model="editingAdmin.adminPassword" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="管理员名称">
          <el-input v-model="editingAdmin.adminName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="editingAdmin.adminIdcard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="editingAdmin.adminPhone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetEditingAdmin">取 消</el-button>
        <el-button type="primary" @click="editAdmin">确 定</el-button>
      </span>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[4, 8, 10, 12]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { Message } from 'element-ui'; // 引入 ElMessage

export default {
  data() {
    return {
      tableData: [],
     
      filteredData: [], // 用于存储过滤后的数据
      originalData: [], // 用于存储原始数据
      searchKeyword: '', // 用于绑定搜索输入框的值
      currentPage: 1,
      total: 0,
      pageSize: 4,
      addDialogVisible: false,
      editDialogVisible: false,
      editingAdmin: {},
      addForm: {
        adminAccount: '',
        adminPassword: '',
        adminName: '',
        adminIdcard: '',
        adminPhone: ''
      },
      
      formLabelWidth: '120px'
    };
  },
  computed: {
 
  },
  methods: {
    handleSearch() {
      this.currentPage = 1; // 重置当前页码为第一页
      this.fetchData();
    },
  
    fetchData() {
      this.$axios
        .get("/admins/get", {
          params: {
            currpage: this.currentPage,
            pagesize: this.pageSize,
           adminID: this.searchKeyword, // 添加搜索关键字参数
           adminName: this.searchKeyword,
           adminAccount: this.searchKeyword,
           adminIdcard: this.searchKeyword,
           adminPhone: this.searchKeyword
           
          }
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data; // 假设返回的数据是用户列表
          this.total = res.data.total; // 设置总条数
        })
        .catch(err => {
          console.log(err);
        });
    },
    addData(data) {
console.log(data);

      this.$axios
        .post("/admins/insert", data)
        .then(res => {
          console.log(res);
          this.fetchData(); // 刷新数据
          this.resetAddForm();
          Message.success('管理员添加成功');
        })
        .catch(err => {
          console.log(err);
          Message.error('添加管理员失败，请稍后再试');
        });
    },
    updateData(data) {
      this.$axios
      .post("/admins/update", data)
        .then(res => {
          console.log(res);
          this.fetchData(); // 刷新数据
          this.resetEditingAdmin();
          Message.success('管理员更新成功');
        })
        .catch(err => {
          console.log(err);
          Message.error('更新管理员失败，请稍后再试');
        });
    },
    handleDelete(row) {
    const adminId = row.adminId; // 确保这里正确获取了管理员的ID
    this.$confirm('此操作将永久删除该管理员, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      console.log('Confirmed to delete admin with ID:', adminId); // 打印管理员 ID
      this.deleteData(adminId); // 调用删除方法
    }).catch(() => {
      console.log('Delete operation canceled by user.'); // 用户取消删除操作
    });
  },
  deleteData(adminId) {
    this.$axios
      .delete(`/admins/delete/${adminId}`) // 使用提取的 ID
      .then(res => {
        console.log(res);
        this.fetchData(); // 刷新数据
        Message.success('管理员删除成功');
      })
      .catch(err => {
        console.log(err);
        Message.error('删除管理员失败，请稍后再试');
      });
  },
  
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    handleAdd() {
      this.addDialogVisible = true;
    },
    handleEdit(row) {
      this.editingAdmin = { ...row }; // 复制当前行的数据到表单
      this.editDialogVisible = true;
    },
  
    addAdmin() {
      console.log(this.addForm);
      
      this.addData(this.addForm);
      this.addDialogVisible = false;
    },
    editAdmin() {
      this.updateData(this.editingAdmin);
      this.editDialogVisible = false;
    },
    resetAddForm() {
      this.addForm = {
        adminAccount: '',
        adminPassword: '',
        adminName: '',
        adminIdcard: '',
        adminPhone: ''
      };
    },
    resetEditingAdmin() {
      this.editingAdmin = {};
    },
  
  },

  
  mounted() {
    this.fetchData();
  }
};

</script>

<style scoped>
/* 可以在这里添加一些样式 */
</style>
  